<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="/bigdata/property/js/jquery.js"></script>
    <script type="text/javascript" src="/bigdata/property/js/echarts.min.js"></script>
    <script type="text/javascript" src="/bigdata/property/js/jquery.limarquee.js"></script>
    <script type="text/javascript" src="/bigdata/property/js/jquery.cxselect.min.js"></script>

    <link rel="stylesheet" href="/bigdata/property/css/comon0.css">
</head>
<body>
<div style="background:#28333e  center top;">
    <div class="loading">
        <div class="loadbox"><img src="/bigdata/property/picture/loading.gif"> 页面加载中...</div>
    </div>
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height:400px;">
                    <div class="alltitle">物业出租率排名</div>
                    <div class="navboxall" id="echart5"></div>
                </div>

                <div class="boxall" style="height:350px;">
                    <div class="alltitle">设备统计</div>
                    <div class="navboxall" id="echart1"></div>
                </div>
            </li>
            <li>

                <div class="boxall" style="height:230px">
                    <div class="clearfix navboxall" style="height: 100%">
                        <div class="pulll_left num">
                            <div class="numbt">当月总交易金额<span>(单位：元)</span></div>
                            <div class="numtxt">193827211</div>
                        </div>
                        <div class="pulll_right zhibiao">
                            <div class="zb1"><span>当月交易笔数</span>
                                <div id="zb1"></div>
                            </div>
                            <div class="zb2"><span>昨日交易笔数</span>
                                <div id="zb2"></div>
                            </div>
                            <div class="zb3"><span>今日交易笔数</span>
                                <div id="zb3"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="boxall" style="height:255px">
                    <div class="alltitle">年度收支趋势</div>
                    <div class="navboxall" id="echart4"></div>
                </div>
                <div class="boxall" style="height:250px">
                    <div class="alltitle">年度水电统计</div>
                    <div class="navboxall" id="echart3"></div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:250px;">
                    <div class="alltitle">告警数据</div>
                    <div class="navboxall" >
                        <div class="wraptit">
                            <span>类型</span><span>类容</span><span style="width: 168px;">报警时间</span>
                        </div>
                        <div class="wrap">
                            <ul>
                                <li><p><span>100021415</span><span>199</span><span style="width: 168px;">05-19 12:12:30</span></p></li>
                                <li><p><span>100021415</span><span>199</span><span style="width: 168px;">05-19 12:12:30</span></p></li>
                                <li><p><span>100021415</span><span>199</span><span style="width: 168px;">05-19 12:12:30</span></p></li>
                                <li><p><span>100021415</span><span>199</span><span style="width: 168px;">05-19 12:12:30</span></p></li>
                                <li><p><span>100021415</span><span>199</span><span style="width: 168px;">05-19 12:12:30</span></p></li>
                                <li><p><span>100021415</span><span>199</span><span style="width: 168px;">05-19 12:12:30</span></p></li>
                                <li><p><span>100021415</span><span>199</span><span style="width: 168px;">05-19 12:12:30</span></p></li>
                            </ul>
                        </div>

                    </div>
                </div>
                <div class="boxall" style="height:500px">
                    <div class="alltitle">能耗用量排名</div>
                    <div class="navboxall">
                        <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tbody>
                            <tr>
                                <th scope="col">排名</th>
                                <th scope="col">物业</th>
                                <th scope="col">用电量</th>
                                <th scope="col">用水量</th>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td>腾讯科技</td>
                                <td>114万<br></td>
                                <td>100%<br></td>
                            </tr>
                            <tr>
                                <td><span>2</span></td>
                                <td>百度公司</td>
                                <td>923823万</td>
                                <td>21%</td>
                            </tr>

                            <tr>
                                <td><span>3</span></td>
                                <td>新浪</td>
                                <td>1240253万</td>
                                <td>12%</td>
                            </tr>
                            <tr>
                                <td><span>4</span></td>
                                <td>网易</td>
                                <td>1.2亿</td>
                                <td>39%</td>
                            </tr>
                            <tr>
                                <td><span>5</span></td>
                                <td>网易</td>
                                <td>1.2亿</td>
                                <td>39%</td>
                            </tr>
                            <tr>
                                <td><span>6</span></td>
                                <td>网易</td>
                                <td>1.2亿</td>
                                <td>39%</td>
                            </tr>
                            <tr>
                                <td><span>7</span></td>
                                <td>网易</td>
                                <td>1.2亿</td>
                                <td>39%</td>
                            </tr>
                            <tr>
                                <td><span>8</span></td>
                                <td>网易</td>
                                <td>1.2亿</td>
                                <td>39%</td>
                            </tr>
                            <tr>
                                <td><span>9</span></td>
                                <td>网易</td>
                                <td>1.2亿</td>
                                <td>39%</td>
                            </tr>
                            <tr>
                                <td><span>10</span></td>
                                <td>网易</td>
                                <td>1.2亿</td>
                                <td>39%</td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </li>
        </ul>

    </div>
</div>

<script>

    $(function () {
        $('.wrap,.adduser').liMarquee({
            direction: 'up',//身上滚动
            runshort: false,//内容不足时不滚动
            scrollamount: 20//速度
        });
    });

</script>

<script>
    /*   */
    $(window).load(function () {
        $(".loading").fadeOut()
    })
    $(function () {
        echarts_1();
        echarts_3();
        echarts_4();
        echarts_5();
        zb1();
        zb2();
        zb3();

        function echarts_1() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart1'));
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c} ({d}%)"
                },
                legend: {
                    top: '15%',
                    data: ['电表', '冷水表', '热水表', '燃气表'],
                    icon: 'circle',
                    textStyle: {
                        color: 'rgba(255,255,255,.6)',
                    }
                },
                calculable: true,
                series: [{
                    name: '',
                    color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#c96262'],
                    type: 'pie',
                    //起始角度，支持范围[0, 360]
                    startAngle: 0,
                    //饼图的半径，数组的第一项是内半径，第二项是外半径
                    radius: [51, 100],
                    //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
                    center: ['50%', '45%'],

                    //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
                    // 'radius' 面积展现数据的百分比，半径展现数据的大小。
                    //  'area' 所有扇区面积相同，仅通过半径展现数据大小
                    roseType: 'area',
                    //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,
                            //  formatter: '{c}辆'
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length2: 1,
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data: [
                        {value: 1, name: '电表',},
                        {value: 4, name: '冷水表',},
                        {value: 5, name: '热水表',},
                        {value: 6, name: '燃气表',},


                        {value: 0, name: "", label: {show: false}, labelLine: {show: false}},
                        {value: 0, name: "", label: {show: false}, labelLine: {show: false}},
                        {value: 0, name: "", label: {show: false}, labelLine: {show: false}},
                        {value: 0, name: "", label: {show: false}, labelLine: {show: false}},

                    ]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function echarts_3() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart3'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#57617B'
                        }
                    }
                },
                legend: {

                    //icon: 'vertical',
                    data: ['用电量', '用水量'],
                    //align: 'center',
                    // right: '35%',
                    top: '0',
                    textStyle: {
                        color: "#fff"
                    },
                    // itemWidth: 15,
                    // itemHeight: 15,
                    itemGap: 20,
                },
                grid: {
                    left: '0',
                    right: '20',
                    top: '10',
                    bottom: '20',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'rgba(255,255,255,.6)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }, {}],
                yAxis: [{
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'rgba(255,255,255,.6)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    }
                }],
                series: [{
                    name: '用电量',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(24, 163, 64, 0.3)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(24, 163, 64, 0)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 10
                        }
                    },
                    propertytyle: {
                        normal: {
                            color: '#cdba00',
                            borderColor: 'rgba(137,189,2,0.27)',
                            borderWidth: 12
                        }
                    },
                    data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
                }, {
                    name: '用水量',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(39, 122,206, 0.3)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(39, 122,206, 0)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 10
                        }
                    },
                    propertytyle: {
                        normal: {
                            color: '#277ace',
                            borderColor: 'rgba(0,136,212,0.2)',
                            borderWidth: 12
                        }
                    },
                    data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function echarts_4() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart4'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#57617B'
                        }
                    }
                },
                "legend": {

                    "data": [
                        {"name": "收入"},
                        {"name": "支出"},
                        {"name": "利润率"}
                    ],
                    "top": "0%",
                    "textStyle": {
                        "color": "rgba(255,255,255,0.9)"//图例文字
                    }
                },

                "xAxis": [
                    {
                        "type": "category",

                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"}},
                        axisLabel: {
                            textStyle: {color: "rgba(255,255,255,.6)", fontSize: '14',},
                        },

                    },
                ],
                "yAxis": [
                    {
                        "type": "value",
                        "name": "金额",
                        "min": 0,
                        "max": 50,
                        "interval": 10,
                        "axisLabel": {
                            "show": true,

                        },
                        axisLine: {lineStyle: {color: 'rgba(255,255,255,.4)'}},//左线色

                    },
                    {
                        "type": "value",
                        "name": "完成率",
                        "show": true,
                        "axisLabel": {
                            "show": true,

                        },
                        axisLine: {lineStyle: {color: 'rgba(255,255,255,.4)'}},//右线色
                        splitLine: {show: true, lineStyle: {color: "#001e94"}},//x轴线
                    },
                ],
                "grid": {
                    "top": "10%",
                    "right": "30",
                    "bottom": "30",
                    "left": "30",
                },
                "series": [
                    {
                        "name": "收入",

                        "type": "bar",
                        "data": [4, 6, 36, 6, 8, 6, 4, 6, 30, 6, 8, 12],
                        "barWidth": "auto",
                        "propertytyle": {
                            "normal": {
                                "color": {
                                    "type": "linear",
                                    "x": 0,
                                    "y": 0,
                                    "x2": 0,
                                    "y2": 1,
                                    "colorStops": [
                                        {
                                            "offset": 0,
                                            "color": "#609db8"
                                        },

                                        {
                                            "offset": 1,
                                            "color": "#609db8"
                                        }
                                    ],
                                    "globalCoord": false
                                }
                            }
                        }
                    },
                    {
                        "name": "支出",
                        "type": "bar",
                        "data": [
                            4, 2, 34, 6, 8, 6, 4, 2, 32, 6, 8, 18
                        ],
                        "barWidth": "auto",

                        "propertytyle": {
                            "normal": {
                                "color": {
                                    "type": "linear",
                                    "x": 0,
                                    "y": 0,
                                    "x2": 0,
                                    "y2": 1,
                                    "colorStops": [
                                        {
                                            "offset": 0,
                                            "color": "#66b8a7"
                                        },
                                        {
                                            "offset": 1,
                                            "color": "#66b8a7"
                                        }
                                    ],
                                    "globalCoord": false
                                }
                            }
                        },
                        "barGap": "0"
                    },
                    {
                        "name": "利润率",
                        "type": "line",
                        "yAxisIndex": 1,

                        "data": [100, 50, 80, 30, 90, 40, 70, 33, 100, 40, 80, 20],
                        lineStyle: {
                            normal: {
                                width: 2
                            },
                        },
                        "propertytyle": {
                            "normal": {
                                "color": "#cdba00",

                            }
                        },
                        "smooth": true
                    }
                ]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function echarts_5() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart5'));
// 颜色
            var lightBlue = {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: 'rgba(41, 121, 255, 1)'
                }, {
                    offset: 1,
                    color: 'rgba(0, 192, 255, 1)'
                }],
                globalCoord: false
            }

            var option = {
                tooltip: {
                    show: false
                },
                grid: {
                    top: '0%',
                    left: '65',
                    right: '14%',
                    bottom: '0%',
                },
                xAxis: {
                    min: 0,
                    max: 100,
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    }
                },
                yAxis: {
                    data: ['字段名称', '字段名称', '字段名称', '字段名称', '字段名称', '字段名称', '字段名称', '字段名称', '字段名称', '字段名称', '字段名称'],
                    //offset: 15,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: 14
                    }
                },
                series: [{
                    type: 'bar',
                    label: {
                        show: true,
                        zlevel: 10000,
                        position: 'right',
                        padding: 10,
                        color: '#49bcf7',
                        fontSize: 14,
                        formatter: '{c}%'

                    },
                    propertytyle: {
                        color: '#49bcf7'
                    },
                    barWidth: '15',
                    data: [49, 80, 67, 99, 12, 19, 39, 84, 28, 47, 57, 100],
                    z: 10
                }, {
                    type: 'bar',
                    barGap: '-100%',
                    propertytyle: {
                        color: '#fff',
                        opacity: 0.1
                    },
                    barWidth: '15',
                    data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
                    z: 5
                }],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }


        function zb1() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('zb1'));
            var v1 = 298//男消费
            var v2 = 523//女消费
            var v3 = v1 + v2//总消费
            option = {
                series: [{

                    type: 'pie',
                    radius: ['60%', '70%'],
                    color: '#49bcf7',
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: [{
                        value: v2,
                        name: '女消费',
                        label: {
                            normal: {
                                formatter: v2 + '',
                                textStyle: {
                                    fontSize: 20,
                                    color: '#fff',
                                }
                            }
                        }
                    }, {
                        value: v1,
                        name: '男消费',
                        label: {
                            normal: {
                                formatter: function (params) {
                                    return '占比' + Math.round(v2 / v3 * 100) + '%'
                                },
                                textStyle: {
                                    color: '#aaa',
                                    fontSize: 12
                                }
                            }
                        },
                        propertytyle: {
                            normal: {
                                color: 'rgba(255,255,255,.2)'
                            },
                            emphasis: {
                                color: '#fff'
                            }
                        },
                    }]
                }]
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function zb2() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('zb2'));
            var v1 = 298//男消费
            var v2 = 523//女消费
            var v3 = v1 + v2//总消费
            option = {

//animation: false,
                series: [{
                    type: 'pie',
                    radius: ['60%', '70%'],
                    color: '#cdba00',
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: [{
                        value: v1,
                        name: '男消费',
                        label: {
                            normal: {
                                formatter: v1 + '',
                                textStyle: {
                                    fontSize: 20,
                                    color: '#fff',
                                }
                            }
                        }
                    }, {
                        value: v2,
                        name: '女消费',
                        label: {
                            normal: {
                                formatter: function (params) {
                                    return '占比' + Math.round(v1 / v3 * 100) + '%'
                                },
                                textStyle: {
                                    color: '#aaa',
                                    fontSize: 12
                                }
                            }
                        },
                        propertytyle: {
                            normal: {
                                color: 'rgba(255,255,255,.2)'
                            },
                            emphasis: {
                                color: '#fff'
                            }
                        },
                    }]
                }]
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        /*   */
        function zb3() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('zb3'));
            var v1 = 298//男消费
            var v2 = 523//女消费
            var v3 = v1 + v2//总消费
            option = {
                series: [{

                    type: 'pie',
                    radius: ['60%', '70%'],
                    color: '#62c98d',
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: [{
                        value: v2,
                        name: '女消费',
                        label: {
                            normal: {
                                formatter: v2 + '',
                                textStyle: {
                                    fontSize: 20,
                                    color: '#fff',
                                }
                            }
                        }
                    }, {
                        value: v1,
                        name: '男消费',
                        label: {
                            normal: {
                                formatter: function (params) {
                                    return '占比' + Math.round(v2 / v3 * 100) + '%'
                                },
                                textStyle: {
                                    color: '#aaa',
                                    fontSize: 12
                                }
                            }
                        },
                        propertytyle: {
                            normal: {
                                color: 'rgba(255,255,255,.2)'
                            },
                            emphasis: {
                                color: '#fff'
                            }
                        },
                    }]
                }]
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    })



</script>



</body>
</html>
